<script setup lang="ts">
  import { useAppStore } from "@/store/modules/app";
  import { useSettings } from "@/store/modules/settings"
  const appStore = useAppStore();
  const settings = useSettings();
  import SettingDialog from "@/components/SettingDialog/SettingDialog.vue";
  settings.changeTheme(settings.theme)
</script>

<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <MyLoading ref="myLoadingRef" />
    <SettingDialog />
    <router-view />
    <!-- <router-view v-slot="{ Component }">
      <transition name="el-fade-in-linear">
        <component :is="Component" />
      </transition>
    </router-view>
    <SettingDialog /> -->
  </el-config-provider>
</template>

<style lang="scss" scoped>
  // @import "./styles/common.scss";
  /*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
  .slide-fade-enter-active {
    transition: all 0.3s ease-out;
  }

  .slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
  }
</style>
